<template>
    <div class="esBudget-container">
        <el-dialog v-model="state.isShowDialog" draggable width="50%" @close="closeDialog">
            <template #header>
                <div style="color: #fff">
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <el-card shadow="hover" style="margin-top: 8px">
                <el-descriptions title="基础信息" :column="4" border>
                    <el-descriptions-item label="产品名称">{{ state.ruleForm.name }}</el-descriptions-item>
                    <el-descriptions-item label="信息费">
                        {{ formattedAmount((state.ruleForm.informationFee / 100.0).toFixed(2)) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="商务费用">
                        {{ formattedAmount((state.ruleForm.businessExpenses / 100.0).toFixed(2)) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="收入价格">
                        {{ formattedAmount((state.ruleForm.incomePrice / 100.0).toFixed(2)) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="省份">{{ state.ruleForm.province }}</el-descriptions-item>
                    <el-descriptions-item label="退费率">{{ state.ruleForm.refundRate }}</el-descriptions-item>
                    <el-descriptions-item label="留存" v-if="state.ruleForm.moonNumber==1">
                        {{ formattedAmount(state.ruleForm.keep) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="留存率" v-else>
                        {{ formattedAmount(state.ruleForm.retentionRate) + "%" }}
                    </el-descriptions-item>
                    <el-descriptions-item label="推广金额">
                        {{ formattedAmount((state.ruleForm.promotionAmount / 100.0).toFixed(2)) }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-table :data="state.data" style="width: 100%;margin: 20px 0" v-loading="state.loading"
                          tooltip-effect="light" row-key="id" border stripe highlight-current-row>
                    <el-table-column header-align="center" prop="statementTime" label="日期" align="center"
                                     show-overflow-tooltip/>
                    <el-table-column header-align="center" prop="userNum" label="用户数" align="center"
                                     show-overflow-tooltip>
                        <template #default="scope">
                            {{ formattedAmount(scope.row.userNum) }}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="keep" label="留存数" align="center"
                                     show-overflow-tooltip v-if="state.ruleForm.moonNumber!=1">
                        <template #default="scope">
                            {{ formattedAmount(scope.row.keep) }}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="takeIn" label="收入(元)" align="center"
                                     show-overflow-tooltip>
                        <template #default="scope">
                            {{ formattedAmount((scope.row.takeIn / 100.0).toFixed(2)) }}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="cost" label="成本(元)" align="center"
                                     show-overflow-tooltip>
                        <template #default="scope">
                            {{ formattedAmount((scope.row.cost / 100.0).toFixed(2)) }}
                        </template>
                    </el-table-column>
                    <!--          <el-table-column header-align="center" prop="cost" label="毛利率(元)" align="center" show-overflow-tooltip>-->
                    <!--            <template #default="scope">-->
                    <!--              {{ formattedAmount(((scope.row.takeIn-scope.row.cost) / 100.0).toFixed(2)) }}-->
                    <!--            </template>-->
                    <!--          </el-table-column>-->
                    <el-table-column header-align="center" prop="refund" label="退费(元)" align="center"
                                     show-overflow-tooltip>
                        <template #default="scope">
                            {{ formattedAmount((scope.row.refund / 100.0).toFixed(2)) }}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="customerService" label="客服(元)" align="center"
                                     show-overflow-tooltip>
                        <template #default="scope">
                            {{ formattedAmount((scope.row.customerService / 100.0).toFixed(2)) }}
                        </template>
                    </el-table-column>
                </el-table>
                <el-descriptions title="总结" border>
                    <el-descriptions-item label="收入">{{
                            formattedAmount(state.sunData.takeInTotalSun.toFixed(2))
                        }}
                    </el-descriptions-item>
                    <el-descriptions-item label="成本">{{
                            formattedAmount(state.sunData.costTotalSun.toFixed(2))
                        }}
                    </el-descriptions-item>
                    <el-descriptions-item label="毛利率">
                        {{ formattedAmount(state.sunData.grossProfitMargin.toFixed(2)) + '%' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="推广成本">
                        {{ formattedAmount(state.sunData.popularizeTotalSun.toFixed(2)) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="客服成本">
                        {{ formattedAmount(state.sunData.customerServiceTotalSun.toFixed(2)) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="退费成本">
                        {{ formattedAmount(state.sunData.refundTotalSun.toFixed(2)) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="毛利润">
                        {{ formattedAmount((state.sunData.takeInTotalSun - state.sunData.costTotalSun).toFixed(2)) }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <template #footer>
				<span class="dialog-footer">
					<!--					<el-button @click="cancel" size="default">取 消</el-button>-->
                    <!--					<el-button type="primary" @click="submit" size="default">生 成</el-button>-->
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="editEsBudgetProduct">

import {reactive} from 'vue';
import mittBus from '/@/utils/mitt';
import {EsBudgetProduct, EsBudgetStatement} from '/@/api/models';
import SysEsBudgetStatementApi from '/@/api/exocytosis/budgetStatement';
import {sysBaseDict} from "/@/api/models";

// 定义变量内容
const props = defineProps({
    title: String,
});
const state = reactive({
    loading: false,
    merchantDict: [] as sysBaseDict[],
    isShowDialog: false,
    ruleForm: {} as EsBudgetProduct, // 主表带过来的数据
    queryParams: {
        pid: undefined,
    },
    data: [] as Array<EsBudgetStatement>, // 查询到数据
    sunData: {
        takeInTotalSun: 0,
        costTotalSun: 0,
        grossProfitMargin: 0,
        popularizeTotalSun: 0,//推广成本=推广用户数总和*推广金额(不算商务费)
        customerServiceTotalSun: 0,
        refundTotalSun: 0,
    },
});

// 打开弹窗
const openDialog = async (row: EsBudgetProduct) => {
    state.isShowDialog = true;
    state.ruleForm = row;
    state.queryParams.pid = state.ruleForm.id;
    const res = await SysEsBudgetStatementApi().queryRecord(state.queryParams);
    state.data = res.data.result ?? [];
    const resSum = await SysEsBudgetStatementApi().querySum(state.queryParams);
    state.sunData = resSum.data.result[0] ?? state.sunData;
    state.sunData.takeInTotalSun = state.sunData.takeInTotalSun + state.ruleForm.keep * state.ruleForm.incomePrice / 100;
    state.sunData.grossProfitMargin = (state.sunData.takeInTotalSun - state.sunData.costTotalSun) / state.sunData.takeInTotalSun * 100;
    state.sunData.popularizeTotalSun = state.sunData.popularizeTotalSun * state.ruleForm.promotionAmount;
};

// 关闭弹窗
const closeDialog = () => {
    state.ruleForm.status = state.ruleForm.status == '启用' ? 1 : 2;
    mittBus.emit('submitRefresh');
    state.isShowDialog = false;
};

// 金额格式化
const formattedAmount = (unm: number) => {
    return new Intl.NumberFormat('en-CN').format(unm);
};

// 导出对象 将属性或者函数暴露给父组件
defineExpose({openDialog});
</script>
